<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css5 animation transform</title>
	<style>
		.box{
			width: 280px;
			height: 160px;
			padding-left: 2px;
			overflow: hidden;
			transition: all 0.3s;
			-webkit-transition: all 0.3s;
			-moz-transition:all 0.3s;
			/*border-radius: 50%;*/
			 background:#007aff;
            box-shadow: 5px 10px 10px rgba(0,0,0,.3);

		}
		.box:hover{
			/*width:400px;*/
			/*border-radius: 50%;*/
           	

		}
		.box img{
			transition: all .3s ease;

		}
		.box:hover img{
			/*transition: 0.3s;*/
			transform:rotate(90deg);
			transform:scale(1.2);
			/*-webkit-transform:scale(1.2);*/
		}
		.nav-container{
			background:#007aff;
			position: relative;
		}
		.nav{
			position: relative;
			height: 30px;
			line-height: 30px;
			cursor: pointer;
			box-shadow: 5px 2px 10px rgba(0,0,0,.3);
		}
		.navitem{
			position: absolute;
			top: 30;
			height: 0px;
			line-height: 30px;
			transition: all .5s ease;
			opacity: 0;
			width: 100%;
		}
		.nav-container:hover .navitem{
			opacity: 1.0;
			/*transition: all 0.3s;*/
			/*top:30px;*/
			background: #dddddd;
			height: 110px;
		}
	</style>
</head>

<body>
	<div class="box">
		<img src="http://img.mukewang.com/546418750001a81906000338-280-160.jpg" alt="">
	</div>
	<div class="box"></div>
	<hr/>
	<div class="nav-container">
		<div class="nav">
			MENU
		</div>
		<div class="navitem">fff</div>
	</div>
</body>
</html>